<template>
  <div class="biji">
    <div class="title">
      <div class="divider_line"></div>
      <div class="img">
        <img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1bc92bd7fdb80c023c6887ae4f419e71.jpg?f=webp"
          alt=""
        />
      </div>
    </div>
    <div class="zoba">
      <div v-for="(item, index) in arrs" :key="index" class="zoba_div">
        <img :src="item.imgsrc" alt="" />
        <div class="zoba_fff">
          <div class="top">
            <p class="tit">{{ item.title }}</p>
            <p class="pip">
              ￥{{ item.xaqa }} <span class="spaspa">{{ item.yaqa }}</span>
            </p>
          </div>
          <div class="floot">
            <p class="price">{{ item.pirse }}</p>
            <button>立即购买</button>
          </div>
        </div>
      </div>
    </div>
    <div class="divider_line"></div>
    <div class="img">
      <img
        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6a6c6904c72672a67f1ddb6d4938d414.jpg?f=webp"
        alt=""
      />
    </div>
    <div class="nidu">
      <div v-for="(item, index) in arrn" :key="index" class="nidu_div">
        <img :src="item.imgsrc" alt="" />
        <div class="nidu_fff">
          <div class="top">
            <p class="tit">{{ item.title }}</p>
            <p class="price">{{ item.pirse }}</p>
          </div>
          <div class="floot">
            <p class="pip">
              ￥{{ item.xaqa }} <span class="spaspa">{{ item.yaqa }}</span>
            </p>
            <button>立即购买</button>
          </div>
        </div>
      </div>
    </div>
    <div class="img">
      <img
        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/aeb37b208fc7303d6a6e16b57e4e1942.jpg?f=webp"
        alt=""
      />
    </div>
    <div class="divider_line"></div>
    <div class="img">
      <img
        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e320df8ff307626d984f1708d3c961f2.jpg?f=webp"
        alt=""
      />
    </div>
    <div class="divider_line"></div>
    <div class="img bor">
      <img
        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ed0de51cddbd973e1ac2e27ba05a0693.jpg?f=webp"
        alt=""
      />
    </div>
    <div class="qita">
      <div v-for="(item, index) in arrl" :key="index" class="qita_div">
        <img :src="item.imgsrc" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import instance from "../../../api/request";
export default {
  name: "Biji",
  data() {
    return {
      arrs: [],
      arrn: [],
      arrl: [],
    };
  },
  methods: {
    async fs() {
      let { data } = await instance.get("/index.json");
      this.arrs = data.home.biji.zoba;
    },
    async fn() {
      let { data } = await instance.get("/index.json");
      this.arrn = data.home.biji.nidu;
    },
    async fl() {
      let { data } = await instance.get("/index.json");
      this.arrl = data.home.biji.qita;
    },
  },
  created() {
    this.fs();
    this.fn();
    this.fl();
  },
};
</script>

<style lang="less" scoped>
.biji {
  width: 7.2rem;
  .img {
    width: 7.2rem;
    img {
      width: 100%;
    }
  }
  .divider_line {
    border-bottom: 0.266667rem solid rgb(72, 120, 166);
    background-color: rgb(72, 120, 166);
  }
  .zoba {
    width: 7.2rem;
    background-color: rgb(72, 120, 166);
    .zoba_div {
      padding-top: 0.266667rem;
      width: 6.96rem;
      // height: 5.77rem;
      margin: 0 auto;
      img {
        width: 6.96rem;
        vertical-align: middle;
      }
      .zoba_fff {
        background: #fff;
        height: 1rem;
        padding: 0.2rem 0.27rem;
        .top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .tit {
            width: 4.1rem;
            height: 0.5rem;
            overflow: hidden;
            font-size: 0.32rem;
          }
          .pip {
            font-size: 0.28rem;
            color: #ea625b;
          }
          .spaspa {
            font-size: 0.22rem;
            color: rgba(0, 0, 0, 0.54);
            text-decoration: line-through;
          }
        }
        .floot {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .price {
            width: 4rem;
            height: 0.33rem;
            overflow: hidden;
            font-size: 0.22rem;
            margin: 0.06rem 0 0;
            color: rgba(0, 0, 0, 0.54);
          }
          button {
            width: 2rem;
            height: 0.59rem;
            background: #ea625b;
            border-radius: 0.05rem;
            text-align: center;
            color: #fff;
            font-size: 0.24rem;
            padding: 0.16rem 0;
            font-weight: 700;
            border: none;
          }
        }
      }
    }
  }
  .nidu {
    width: 6.96rem;
    background-color: #4878a6;
    padding: 0 0.12rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .nidu_div {
      width: 49%;
      overflow: hidden;
      border-radius: 0.1rem;
      img {
        width: 100%;
      }
      .nidu_fff {
        background: #fff;
        padding: 0.2rem 0.27rem;
        .top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-direction: column;
          .tit {
            height: 0.5rem;
            overflow: hidden;
            font-size: 0.32rem;
          }

          .price {
            height: 0.33rem;
            overflow: hidden;
            font-size: 0.22rem;
            margin: 0.06rem 0 0;
            color: rgba(0, 0, 0, 0.54);
          }
        }
        .floot {
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-direction: column;
          .pip {
            font-size: 0.28rem;
            color: #ea625b;
          }
          .spaspa {
            font-size: 0.22rem;
            color: rgba(0, 0, 0, 0.54);
            text-decoration: line-through;
          }
          button {
            width: 2rem;
            height: 0.59rem;
            background: #ea625b;
            border-radius: 0.05rem;
            text-align: center;
            color: #fff;
            font-size: 0.24rem;
            padding: 0.16rem 0;
            font-weight: 700;
            border: none;
          }
        }
      }
    }
  }
  .qita {
    background: #fff;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    .qita_div {
      img {
        width: 3.6rem;
      }
    }
  }
  .bor {
    border-bottom: 0.01rem solid #ccc;
  }
}
</style>